<!--
 * @Author: wangyu
 * @Date: 2024-12-25 21:55:04
 * @LastEditTime: 2024-12-25 22:01:15
 * @LastEditors: wangyu
 * @Description: 园区监控
 * @FilePath: \dzsq-smartpark-platform\src\views\overview\components\monitor.vue
-->
<template>
  <comHeaer title="园区监控"></comHeaer>
  <div class="content">
    <el-carousel :interval="5000" arrow="always" indicator-position="none">
      <el-carousel-item v-for="item in list" :key="item.name">
        <img :src="item.img" class="carousel-img" />
        <div
          style="
            color: #ffffff;
            text-align: center;
            font-size: 18px;
            margin-top: 16px;
          "
        >
          {{ item.name }}
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup>
import comHeaer from "../../components/comHeader/index.vue";
import image_01 from "@/assets/imgs/background_01.png";
import image_02 from "@/assets/imgs/image_01.png";
import image_03 from "@/assets/imgs/image_02.png";

const list = ref([
  { img: image_01, name: "园区室外-A2" },
  { img: image_02, name: "园区201-厂房" },
  { img: image_03, name: "园区501-厂房" },
]);
</script>
<style scoped lang="scss">
.content {
  padding: 16px 32px;
  .carousel-img {
    width: 100%;
    height: calc(100% - 60px);
  }
}
</style>
